<template>
	<view class="box">
		<view class="box-one">
			<view class="one">
				<text style="color: red;">* </text>
				<view class="people">预约人 </view>
				<view class="input"><input placeholder="请输入姓名" type="text"></view>
			</view>
			<view class="one">
				<text style="color: red;">* </text>
				<view class="people">联系方式 </view>
				<view class="input"><input placeholder="请输入手机号" type="text"></view>
			</view>
			<view class="one">
				<text style="color: red;">* </text>
				<view class="people">预约卫生室 </view>
				<view>
					<u-picker @cancel="closefour" @confirm="confirmfour" :show="showfour" :columns="columnsthree">
					</u-picker>
					<view style=" margin-right: 120rpx;color: #888888;font-size: 28rpx;" @click="showfour = true">
						{{openfour}}
					</view>
				</view>
			</view>
			<view class="one">
				<text style="color: red;">* </text>
				<view class="people">预约科室 </view>
				<u-picker @cancel="closetwo" @confirm="confirmtwo" :show="showtwo" :columns="columns"></u-picker>
				<view style=" margin-right: 240rpx;color: #888888;font-size: 28rpx;" @click="showtwo = true">{{opentwo}}
				</view>
			</view>
			<view class="one">
				<text style="color: red;">* </text>
				<view class="people">预约医院 </view>
				<u-picker @cancel="closethree" @confirm="confirmthree" :show="showthree" :columns="columnstwo">
				</u-picker>
				<view style=" margin-right: 240rpx;color: #888888;font-size: 28rpx;" @click="showthree = true">
					{{openthree}}
				</view>
			</view>
			<view class="one">
				<text style="color: red;">* </text>
				<view class="people">预约时间 </view>
				<u-calendar @close="close" @confirm="confirm" :show="show"></u-calendar>
				<view class="input" style="border: none;color: #888888;margin-top: -5rpx; " @click="show = true">
					{{open}}
				</view>
			</view>
			<view class="two">
				<view style="display: flex;">
					<text style="color: red;margin-left: 25rpx; ">*</text>
					<view class="peoples">病例简介 </view>
				</view>
				<view class="centen">
					<u--textarea border="none-" v-model="value2" placeholder="请输入内容" count></u--textarea>
				</view>
			</view>
		</view>
		<view class="gobutton">
			<button style="  position: absolute;top: 1100rpx;width: 90%;margin-left: 30rpx;
				background-color:#3F76EE ;color: aliceblue;    border-radius: 60rpx;  
			">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				showtwo: false,
				showthree: false,
				showfour: false,
				open: '请输入预约时间',
				opentwo: '请输入预约科室',
				openthree: '请输入预约医院',
				openfour: '请输入预约的卫生',
				mode: 'range',
				columns: [
					['3333', '3333', '3333']
				],
				columnstwo: [
					['2222', '2222', '2222']
				],
				columnsthree: [
					['1111', '2111', '3111']
				],
				value2: '',
			};
		},
		methods: {
			confirm(e) {
				console.log(e);
				this.show = false
				this.open = e[0]
			},
			close() {
				this.show = false
			},
			confirmtwo(s) {
				this.opentwo = s.value[0]
				this.showtwo = false
			},
			confirmthree(d) {
				this.openthree = d.value[0]
				this.showthree = false
			},
			confirmfour(r) {
				this.openfour = r.value[0]
				this.showfour = false
			},
			closetwo() {
				this.showtwo = false
			},
			closethree() {
				this.showthree = false
			},
			closefour() {
				this.showfour = false
			}
		}
	}
</script>

<style lang="scss">
	.box {
		background-color: #ececec;
		height: 100vh;
		width: 100%;

		.box-one {
			width: 90%;
			height: 1040rpx;
			position: absolute;
			top: 35rpx;
			left: 35rpx;
			border-radius: 15rpx;
			background-color: white;

			.one {
				display: flex;
				width: 90%;
				height: 80rpx;
				border-bottom: 1rpx solid #ececec;
				margin-left: 25rpx;
				margin-top: 25rpx;
				line-height: 80rpx;
				padding-left: 20rpx;

				.input {
					// border: 1rpx solid  #ececec;
					position: absolute;
					left: 220rpx;
					margin-top: 15rpx;
					font-size: 27rpx;
				}
			}

			.people {
				font-weight: bold;
				font-size: 27rpx;
				margin-left: 10rpx;
			
			}

			.peoples {
				font-weight: bold;
				font-size: 27rpx;
				margin-left: 10rpx;
					
			}

			.two {
				margin-top: 35rpx;
				margin-left: 21rpx;
				border-bottom: 1rpx solid #ececec;
			}

			.centen {
				font-size: 20rpx;
				margin-top: -58rpx;
				margin-left: 180rpx;
				width: 70%;
				// height: 100rpx;
				color:  #ececec;
				
			}

		}
	}
</style>
